<section class="sift-filter">
    <ion-toolbar *ngIf="tagData.searchBar">
        <ion-searchbar [placeholder]="tagData.searchBar.placeholder"></ion-searchbar>
    </ion-toolbar>
    <ion-list>
        <ion-item *ngFor="let filter of tagData.filterItem">
            <ion-label>{{filter.title}}</ion-label>
            <ng-container *ngIf="filter.queryType == 'select'">
                <ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet"
                            placeholder="{{filter.dropDownList.item[0].displayName}}">
                    <ion-select-option value="{{item.value}}" *ngFor="let item of filter.dropDownList.item">
                        {{item.displayName}}
                    </ion-select-option>
                </ion-select>
            </ng-container>
            <ng-container *ngIf="filter.queryType == 'multiSelect'">
                <ListItem Picker
                          [extra]="name1"
                          [arrow]="'horizontal'"
                          [(ngModel)]="value1"
                          (onPickerChange)="onPickerChange($event)"
                          (ngModelChange)="onOk1($event)">
                </ListItem>
            </ng-container>
            <ng-container *ngIf="filter.queryType == 'text'">
                <ion-input></ion-input>
            </ng-container>
            <ng-container *ngIf="filter.queryType == 'multiText'">
                <ion-input></ion-input>
                <ion-input></ion-input>
            </ng-container>
        </ion-item>
    </ion-list>
    <ion-buttons>
        <ion-button size="small">{{tagData.resetButton.label}}</ion-button>
        <ion-button>{{tagData.okButton.label}}</ion-button>
    </ion-buttons>
</section>
